<template>
  <div id="cesiumContainer"></div>
</template>

<script>
export default {
  name: 'CesiumContainer',
  data() {
    return {
      viewer: null,
      map: null,
      data: [
        { x: 119.277631, y: 32.301277, z: 14131.654516, heading: 235.999312, pitch: -30.688823 },
        { x: 119.098569, y: 32.248173, z: 7229.042047, heading: 211.859616, pitch: -30.688823 },
        { x: 119.013804, y: 32.238577, z: 7229.042047, heading: 236.364837, pitch: -30.688823 },
        { x: 118.874394, y: 32.211485, z: 7229.042047, heading: 236.290497, pitch: -30.688823 },
        { x: 118.687036, y: 32.161684, z: 7229.042047, heading: 192.276756, pitch: -30.688823 },
        { x: 118.603836, y: 32.035041, z: 7229.042047, heading: 192.232505, pitch: -30.688823 },
        { x: 118.549401, y: 31.964564, z: 7229.042047, heading: 192.203641, pitch: -30.688823 }
      ],
      flyItems: [
        {
          timeout: 2,
          options: {
            duration: 2,
            destination: this.Cesium.Cartesian3.fromDegrees(119.024029, 31.294307, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(0.020624),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            duration: 2,
            destination: this.Cesium.Cartesian3.fromDegrees(119.513786, 31.422338, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(316.215379),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            duration: 2,
            destination: this.Cesium.Cartesian3.fromDegrees(119.678463, 31.685077, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(279.998333),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            duration: 2,
            destination: this.Cesium.Cartesian3.fromDegrees(119.638545, 32.110406, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(244.414423),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            duration: 2,
            destination: this.Cesium.Cartesian3.fromDegrees(119.422309, 32.413507, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(203.485524),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            duration: 2,
            destination: this.Cesium.Cartesian3.fromDegrees(118.820746, 32.551542, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(165.250139),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            destination: this.Cesium.Cartesian3.fromDegrees(118.360414, 32.225058, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(125.534459),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            destination: this.Cesium.Cartesian3.fromDegrees(118.30408, 31.885622, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(91.187787),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            destination: this.Cesium.Cartesian3.fromDegrees(118.427136, 31.482333, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(48.306147),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        },
        {
          timeout: 2,
          options: {
            destination: this.Cesium.Cartesian3.fromDegrees(118.749521, 31.328864, 21890.044973),
            orientation: {
              heading: this.Cesium.Math.toRadians(9.995183),
              pitch: this.Cesium.Math.toRadians(-22.564)
            },
            maximumHeight: 22000,
            easingFunction: this.Cesium.EasingFunction.SINUSOIDAL_OUT
          }
        }
      ]
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.viewer = new this.Cesium.Viewer('cesiumContainer', {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        geocoder: true, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: true, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: true, // 是否显示点击要素之后显示的信息
        imageryProvider: new this.Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=d7ce97f4d9ce9bb20fe0193e53e6b18f',
          layer: 'tdtBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          tileMatrixLables: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14',
            '15',
            '16',
            '17',
            '18',
            '19'
          ],
          maximumLevel: 17,
          show: false
        })
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none'
      this.loadTerrain('http://192.168.56.128:12048/pt/')
      this.load3DTile('/static/3dtiles/MZS/tileset.json', true, {
        dx: 0.000052,
        dy: 0.0000162,
        dz: -320
      })
    },
    loadTerrain(url) {
      // this.viewer.scene.globe.terrainExaggeration = 4 // 地形起伏系数
      this.viewer.terrainProvider = new this.Cesium.CesiumTerrainProvider({
        url: url,
        tilingScheme: new this.Cesium.GeographicTilingScheme(),
        requestVertexNormals: true
      })
    },
    load3DTile(url, isZoomTo = false, dl = { dx: 0, dy: 0, dz: 0 }) {
      const tileset = new this.Cesium.Cesium3DTileset({ url: url })
      tileset.readyPromise
        .then((tileset) => {
          var cartographic = this.Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)

          var surface = this.Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
          var obj = Object.assign({ dx: 0, dy: 0, dz: 0 }, dl)
          var offset = this.Cesium.Cartesian3.fromRadians(
            cartographic.longitude + obj.dx,
            cartographic.latitude + obj.dy,
            cartographic.height + obj.dz
          )
          var translation = this.Cesium.Cartesian3.subtract(offset, surface, new this.Cesium.Cartesian3())
          tileset.modelMatrix = this.Cesium.Matrix4.fromTranslation(translation)
          this.viewer.scene.primitives.add(tileset)
          isZoomTo &&
            this.viewer.zoomTo(
              tileset,
              new this.Cesium.HeadingPitchRange(
                this.Cesium.Math.toRadians(30),
                -this.Cesium.Math.toRadians(10),
                tileset.boundingSphere.radius * 1.8
              )
            )
        })
        .otherwise((error) => {
          console.log('error', error, this.viewer)
        })
    }
  }
}
</script>

<style scoped>
@import '~@/assets/css/divGraphic.css';
</style>
